<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="jtable/themes/redmond/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" type="text/css" />
<link href="jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="jtable/jquery.jtable.js"></script>
<script type="text/javascript" src="jtable/jtablesite.js"></script>
<script type="text/javascript" src="jtable/modernizr-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

<title>Insert title here</title>

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						$('#JobTableContainer')
								.jtable(
										{
											title : 'Running log',
											paging : true, //Enable paging
											pageSize : 15,
											sorting : true, //Enable sorting
											defaultSorting : 'SchedSeq DESC',
											//openChildAsAccordion : true, //Enable this line to show child tabes as accordion style
											actions : {
												listAction : 'ListJobLog'
											},
											fields : {
												ActionLog : {
													title : 'Action Log',
													width : '5%',
													sorting : false,
													edit : false,
													create : false,
													display : function(JobData) {
														//Create an image that will be used to open child table
														var $img = $('<img src="image/note.png" title="Edit Schedule Time" />');
														//Open child table when user clicks the image
														$img
																.click(function() {
																	$(
																			'#JobTableContainer')
																			.jtable(
																					'openChildTable',
																					$img
																							.closest('tr'), //Parent row
																					{
																						title : JobData.record.JobName
																								+ ' - Action Log',
																						actions : {
																							listAction : 'ListActionLog?SchedSeq='+JobData.record.SchedSeq
																						},
																						fields : {
																							SchedSeq : {
																								type : "hidden",
																								title : "SchedSeq",
																								defaultValue : JobData.record.SchedSeq
																							},
																							ActionSeq : {
																								title : "Action Sequence",
																								type : 'string'
																							},
																							PrgName : {
																								title : "Program Name",
																								width : '10%'
																							},
																							PrgParam : {
																								//key : true,
																								title : "Parameter",
																								width : '10%'

																							},
																							Start : {
																								title : 'Start',
																								width : '15%',
																								defaultValue : '2012-12-11 12:30:00'

																							//type : "date"
																							},
																							End : {
																								title : 'End',
																								width : '15%',
																								defaultValue : '2012-12-21 12:30:00'
																							//type : "date"
																							},
																							ActStatus : {
																								title : 'Status',
																								width : '10%',
																								edit : false,
																								list : true,
																								create : false,
																								edit : false,
																								options : {
																									'-2' : '<font color="black">'+'Suspended'+'</font>',
																									'-1' : '<font color="gray">'+'Ready'+'</font>',
																									'0' : '<font color="blue">'+'OK'+'</font>',
																									'1' : '<font color="green">'+'Running'+'</font>',
																									'2' : '<font color="red">'+'Failed'+'</font>'
																								}
																							},
																							
																							Info : {
																								title : 'Info',
																								width : '30%',
																								display : function(data){
																									console.log(data.record.Info);
																									//var $htmlText=$(data.record.Info);
																									//console.log($htmlText);
																									return data.record.Info;
																								}
																							}
																							
																						}
																					},
																					function(
																							data) { //opened handler
																						data.childTable
																								.jtable('load');
																					});
																});
														//Return image to show on the person row
														return $img;
													}
												},
												SchedSeq : {
													key : true,
													title : 'JobSeq',
													width : '15%',
													edit : true,
													create : true
												},
												JobGroup : {
													key : true,
													title : 'Group',
													width : '20%'
												},
												JobName : {
													title : 'Name',
													width : '30%',
												},
												TriggerGroup : {
													key : true,
													title : 'Trigger Group',
													width : '20%'
												},
												TriggerName : {
													title : 'Trigger Name',
													width : '30%',
												},
												JobStatus : {
													title : 'Status',
													width : '10%',
													edit : false,
													list : true,
													create : false,
													edit : false,
													options : {
														'-2' : '<font color="black">'+'Suspended'+'</font>',
														'-1' : '<font color="gray">'+'Ready'+'</font>',
														'0' : '<font color="blue">'+'OK'+'</font>',
														'1' : '<font color="green">'+'Running'+'</font>',
														'2' : '<font color="red">'+'Failed'+'</font>'
													}
												}
											}
										});

						//Load student list from server
						$('#JobTableContainer').jtable('load');

					});
</script>
</head>
<body>
	<center>
		<div id="JobTableContainer"></div>
	</center>
</body>
</html>